<template>
    <div id="earlyWarning">
        <el-row>
           <!--头部 -->
           <el-col :span="24">
              <div class="titleBox">
                  <h4>核心数据监控</h4>
              </div>
            </el-col>
            <!--左侧部分 -->
            <!--人员预警 -->
            <el-col :span="24" id = "left" style="left: 0px;">
              <el-row>
                <el-col :span="24">
                    <div class = "chart_left chart_main" style="height: 28vh;">
                        <el-row>
                            <el-col :span="24">
                                <el-row>
                                    <el-col :span="1" style="width: 1.2vw">
                                        <div class = "block"></div>
                                    </el-col>
                                    <el-col :span="22">
                                        <div class = "title">预约人员预警</div>
                                    </el-col>
                                </el-row>
                            </el-col>
                             <el-row>
                                <el-col :span="6">
                                  <div class="peplTaotal">人数总量</div>
                                </el-col>
                                <el-col :span="6">
                                  <div class="loadBearing">最大承载<span>30</span>万</div>
                                </el-col>
                                <el-col :span="6">
                                  <div class="peplTaotal">普通观众</div>
                                </el-col>
                                <el-col :span="6">
                                  <div class="loadBearing">最大承载<span>18</span>万</div>
                                </el-col>
                             </el-row>
                            <el-col :span="24">
                                <el-row>
                                    <el-col :span="6">
                                        <div id = "chart1_1" class = "chart" style="height: 10.3vh;width:18vh;display:inline-block;"></div>
                                    </el-col>
                                    <el-col :span="6">
                                      <div class="curDate">
                                        <p>当日预约<span>25</span>万</p>
                                        <p>实际到达<span>20</span>万</p>
                                      </div>
                                    </el-col>
                                    <el-col :span="6">
                                        <div id = "chart1_2" class = "chart" style="height: 10.3vh;width:18vh;display:inline-block;"></div>
                                    </el-col>
                                    <el-col :span="6">
                                      <div class="curDate">
                                        <p>当日预约<span>25</span>万</p>
                                        <p>实际到达<span>20</span>万</p>
                                      </div>
                                    </el-col>
                                </el-row>
                            </el-col>
                            <el-col :span="24">
                                <div class="chart1Text">
                                  <p>
                                      <span></span>
                                      <span>实际到达率</span>
                                      <span>70%</span>
                                      <span>以下</span>
                                  </p>
                                  <p>
                                      <span></span>
                                      <span>实际到达率</span>
                                      <span>5%~15%</span>
                                      <span></span>
                                  </p>
                                  <p>
                                      <span></span>
                                      <span>实际到达率</span>
                                      <span>超过15%</span>
                                      <span>以上</span>
                                  </p>
                              </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
                <!--预约出行方式 -->
                <el-col :span="24">
                  <div class = "chart_right chart_main" style="height: 37vh;">
                    <el-row>
                        <el-col :span="1" style="width: 1.2vw">
                          <div class = "block"></div>
                        </el-col>
                        <el-col :span="16">
                          <div class = "title">预约出行方式</div>
                        </el-col>
                        <el-col :span="7">
                          <div class="chart2Text">
                            <p >
                                <span></span>
                                <span>规划参展</span>
                            </p>
                            <p>
                                <span></span>
                                <span>预约参展</span>
                            </p>
                        </div>
                        </el-col>
                        <el-col :span="24">
                            <el-row>
                                <p :span="24">
                                   <el-row>
                                      <div class="chart2Num">
                                        <p>
                                            <span>轨道已入场</span>
                                            <span>1000</span>
                                        </p>
                                        <p>
                                          <span>公交已入场</span>
                                          <span>2000</span>
                                        </p>
                                        <p>
                                          <span>出租已入场</span>
                                          <span>3000</span>
                                        </p>
                                        <p>
                                          <span>自驾已入场</span>
                                          <span>4000</span>
                                        </p>
                                         <p style="border:none">
                                          <span>其他</span>
                                          <span>400</span>
                                        </p>
                                      </div>
                                   </el-row>
                                </p>
                                <el-col :span="24">
                                    <div  id = "chart2" class = "chart" style="height: 20vh;"></div>
                                </el-col>
                            </el-row>
                        </el-col>
                        <!--偏差率 -->
                        <el-col :span="24">
                          <el-row>
                            <el-col :span="3">
                              <div class="deviationRate">偏差率</div>
                            </el-col>
                            <el-row>
                              <el-col :span="24">
                                <div class="rateContentBox">
                                  <div class="rateContent">
                                    <img src="../../static/img/guidao.png" alt="">
                                    <span>轨道</span>
                                    <span class="colorGreen">9%</span>
                                  </div>
                                  <div class="rateContent">
                                    <img src="../../static/img/bus.png" alt="">
                                    <span>公交</span>
                                    <span class="colorYellow">16%</span>
                                  </div>
                                  <div class="rateContent">
                                    <img src="../../static/img/car.png" alt="">
                                    <span>出租</span>
                                    <span class="colorGreen">8%</span>
                                  </div>
                                  <div class="rateContent">
                                    <img src="../../static/img/car.png" alt="">
                                    <span>出租</span>
                                    <span  class="colorYellow">19%</span>
                                  </div>
                                  <div class="rateContent">
                                    <img src="../../static/img/other.png" alt="">
                                    <span>其他</span>
                                    <span  class="colorRed">60%</span>
                                  </div>
                                </div>
                              </el-col>
                            </el-row>
                          </el-row>
                        </el-col>
                    </el-row>
                  </div>
                </el-col>
                <!--剩余停车位预警 -->
                <el-col :span="24">
                  <div class = "chart_right chart_main" style="height: 25vh;">
                    <el-row>
                        <el-col :span="1" style="width: 1.2vw">
                          <div class = "block"></div>
                        </el-col>
                        <el-col :span="13">
                          <div class = "title">剩余停车位预警</div>
                        </el-col>
                        <el-col :span="24">
                            <el-row>
                              <el-col :span="10">
                                    <div class="chart5Text">
                                      <p>
                                          <span>剩余车位</span>
                                          <span>{{surplusCar}}个</span>
                                      </p>
                                      <p >
                                          <span></span>
                                          <span>车位占用率在</span>
                                          <span>70%</span>
                                          <span>以下</span>
                                      </p>
                                      <p>
                                          <span></span>
                                          <span>车位占用率在</span>
                                          <span>70%~85%</span>
                                          <span>以上</span>
                                      </p>
                                      <p>
                                          <span></span>
                                          <span>车位占用率在</span>
                                          <span>85%</span>
                                          <span>以上</span>
                                      </p>
                                  </div>
                                </el-col>
                                <el-col :span="14">
                                  <!-- 核心区域停车场 -->
                                    <div v-show="isShow1" id = "chart2_1" class = "chart" style="height: 17vh;width:16vh;display:inline-block;"></div>
                                    <div v-show="isShow2" id = "chart2_2" class = "chart" style="height: 17vh;width:16vh;display:inline-block;"></div>
                                    <div v-show="isShow3" id = "chart2_3" class = "chart" style="height: 17vh;width:16vh;display:inline-block;"></div>
                                  <!-- 预约临时停车场 -->
                                    <div v-show="isShow4" id = "chart2_4" class = "chart" style="height: 17vh;width:16vh;display:inline-block;"></div>
                                    <div v-show="isShow5" id = "chart2_5" class = "chart" style="height: 17vh;width:16vh;display:inline-block;"></div>
                                    <div v-show="isShow6" id = "chart2_6" class = "chart" style="height: 17vh;width:16vh;display:inline-block;"></div>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                  </div>
                </el-col>
              </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { TMap } from '../TMap';
import 'font-awesome/css/font-awesome.min.css';
import axios from 'axios';
import {config,xAxiss,yAxiss,grid,tooltip1,legend,dotHtml} from '../../static/js/config/chartConfig.js';
import {busLine} from '../../static/js/map/busLine.js';
import jq from 'jquery';
var echarts = require('echarts');
var chart1 = [{"tm":"一体机","nu":2000,"pro":500},{"tm":"一体机","nu":4000,"pro":500},{"tm":"电力设施","nu":2000,"pro":600},{"tm":"摄像头","nu":3000,"pro":100}]
export default {
    name:"earlyWarning",
    components: {

    },
  data(){
    return{
      isShow1:true,
      isShow2:false,
      isShow3:false,
      isShow4:false,
      isShow5:false,
      isShow6:true,
      busNum:"72",
      busLineNum:"103",
      carNum:"10",
      carLineNum:"20",
      isDisplay3:true,
      surplusCar:"28",
      axisTicklineWidth:'1',//仪表盘的axisTicklineWidth
      borderWidth:'5', //水波球 边框的宽度
      borderDistance:'5',//水波球 边框之间的距离
    }
  },
  mounted () {
    this.chart1_1_lef();
    this.chart1_2_lef();
    this.chart2();
    this.chart2_1();
    this.chart2_2();
    this.chart2_3();
    this.chart2_4();
    this.chart2_5();
    this.chart2_6();
  },
  methods: {
    chart1_1_lef(){
      var chart1_1 = echarts.init(document.getElementById('chart1_1'));
      var option = {
        series: [{
          type: 'line',
          data: [220, 182, 191, 234, 290, 330, 310]
        }]
      };
      var myRate1 = 100;
      var option = {
        series: [{
          type: 'gauge',
          center: ['50%', '85%'], // 默认全局居中
          radius: '155%',
          splitNumber: 10, //刻度数量
          min: 0,
          max: 100,
          startAngle: 180,
          endAngle: 0,
          clockwise: true,
          axisLine: {
            show: true,
            lineStyle: {
              width: this.axisTicklineWidth,
              shadowBlur: 0,
              color: [
                [1, '#03B7C9']
              ]
            }
          },
          axisTick: { //仪表盘轴线
            show: true,
            lineStyle: {
              color: '#03B7C9',
              width: this.axisTicklineWidth,
            },
            length: this.axisTicklineWidth*13,
            splitNumber: this.axisTicklineWidth*10
          },
          splitLine: {//刻度样式
            show: true,
            width: this.axisTicklineWidth*2,
            length: this.axisTicklineWidth*18,
            lineStyle: {
              color: '#03B7C9',
            }
          },
          axisLabel: { //分隔线样式
            show: false,
          },
          pointer: { //仪表盘指针
            show: 0
          },
          detail: {
            show: false
          },
          data: [{
            name: "",
            value: myRate1
          }]
        },
          {
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            center: ['50%', '85%'], // 默认全局居中
            radius: '152%',
            min: 0,
            max: 100,
            axisLine: {
              show: false,
              lineStyle: {
                width: this.axisTicklineWidth*9,
                shadowBlur: 0,
                color: [
                  [0.3, new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [{
                      offset: 0,
                      color: '#52fcfc'
                    },
                      {
                        offset: 1,
                        color: '#00FFFF'
                      }
                    ]
                  )
                  ],
                  [0.5, new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [{
                      offset: 0,
                      color: '#00FFFF'
                    },
                      {
                        offset: 1,
                        color: '#FFCC00'
                      }
                    ]
                  )
                  ],
                  [0.84, new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [{
                      offset: 0,
                      color: '#FFCC00'
                    },
                      {
                        offset: 1,
                        color: '#ee2228'
                      }
                    ]
                  )
                  ],
                  [1, new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [{
                      offset: 0,
                      color: '#ee2228'
                    },
                      {
                        offset: 1,
                        color: '#ee2228'
                      }
                    ]
                  )
                  ]
                ]
              }
            },
            axisTick: {
              show: false,

            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false
            },
            pointer:{//指针长短
              show: true,
              width: this.axisTicklineWidth*4,
              length:config().fontSize*7,
            },
            detail: {
              formatter:'{value}%',
              offsetCenter: [0, '-50%'],       // x, y，单位px
              textStyle: {
                color: '#fff',
                fontSize: config().fontSize*1.7,
              }
            },
            itemStyle: {
              normal: {
                color: "#03B7C9",
              }
            },
            title: { //标题
              show: true,
              offsetCenter: [0, "-20%"], // x, y，单位px
              textStyle: {
                color: "#fff",
                fontSize: config().fontSize*1.5, //表盘上的标题文字大小
              }
            },
            data: [{
              value: 66.67,
              name:"实载"
            }]
          }
        ]
      }
      chart1_1.setOption(option);
      window.onresize = chart1_1.resize;
    },
    chart1_2_lef(){
      var chart1_2 = echarts.init(document.getElementById('chart1_2'));
      var option = {
        series: [{
          type: 'line',
          data: [220, 182, 191, 234, 290, 330, 310]
        }]
      };
      var myRate1 = 100;
      var option = {
        series: [{
          type: 'gauge',
          center: ['50%', '85%'], // 默认全局居中
          radius: '155%',
          splitNumber: 10, //刻度数量
          min: 0,
          max: 100,
          startAngle: 180,
          endAngle: 0,
          clockwise: true,
          axisLine: {
            show: true,
            lineStyle: {
              width: this.axisTicklineWidth,
              shadowBlur: 0,
              color: [
                [1, '#03B7C9']
              ]
            }
          },
          axisTick: { //仪表盘轴线
            show: true,
            lineStyle: {
              color: '#03B7C9',
              width: this.axisTicklineWidth,
            },
            length: this.axisTicklineWidth*13,
            splitNumber: this.axisTicklineWidth*10
          },
          splitLine: {//刻度样式
            show: true,
            width: this.axisTicklineWidth*2,
            length: this.axisTicklineWidth*18,
            lineStyle: {
              color: '#03B7C9',
            }
          },
          axisLabel: { //分隔线样式
            show: false,
          },
          pointer: { //仪表盘指针
            show: 0
          },
          detail: {
            show: false
          },
          data: [{
            name: "",
            value: myRate1
          }]
        },
          {
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            center: ['50%', '85%'], // 默认全局居中
            radius: '152%',
            min: 0,
            max: 100,
            axisLine: {
              show: false,
              lineStyle: {
                width: this.axisTicklineWidth*9,
                shadowBlur: 0,
                color: [
                  [0.3, new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [{
                      offset: 0,
                      color: '#52fcfc'
                    },
                      {
                        offset: 1,
                        color: '#00FFFF'
                      }
                    ]
                  )
                  ],
                  [0.5, new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [{
                      offset: 0,
                      color: '#00FFFF'
                    },
                      {
                        offset: 1,
                        color: '#FFCC00'
                      }
                    ]
                  )
                  ],
                  [0.84, new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [{
                      offset: 0,
                      color: '#FFCC00'
                    },
                      {
                        offset: 1,
                        color: '#ee2228'
                      }
                    ]
                  )
                  ],
                  [1, new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [{
                      offset: 0,
                      color: '#ee2228'
                    },
                      {
                        offset: 1,
                        color: '#ee2228'
                      }
                    ]
                  )
                  ]
                ]
              }
            },
            axisTick: {
              show: false,

            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false
            },
            pointer:{//指针长短
              show: true,
              width: this.axisTicklineWidth*4,
              length:config().fontSize*7,
            },
            detail: {
              formatter:'{value}%',
              offsetCenter: [0, '-50%'],       // x, y，单位px
              textStyle: {
                color: '#fff',
                fontSize: config().fontSize*1.7,
              }
            },
            itemStyle: {
              normal: {
                color: "#03B7C9",
              }
            },
            title: { //标题
              show: true,
              offsetCenter: [0, "-20%"], // x, y，单位px
              textStyle: {
                color: "#fff",
                fontSize: config().fontSize*1.5, //表盘上的标题文字大小
              }
            },
            data: [{
              value: 94.44,
              name:"实载"
            }]
          }
        ]
      }
      chart1_2.setOption(option);
      window.onresize = chart1_2.resize;
    },
    chart2(){//立方体图表
       var chart2 = echarts.init(document.getElementById('chart2'));
       var xData = ["轨道","公交","出租","自驾","其他"];
       var barWidth = jq("#chart2").width()/xData.length*0.08;
       var data1 = [150, 200, 250,300,270,];
       var data2 = [70, 120, 160, 200,150];
       var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: grid(15),
            xAxis: xAxiss({'data':xData,'name':'','lineShow':true,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'',"splitLineColor":''}),
            yAxis: [yAxiss({'data':'','name':'','lineShow':false,'labelShow':true,'position':'','unit':'',"splitLineShow":true,"splitLineType":'',"splitLineColor":''}),],
            series: [{
                    name: '规划参展',
                    type: 'bar',
                    barWidth: barWidth,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#6a4de7' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#3a7af5' // 100% 处的颜色
                            }], false),
                            barBorderRadius: [0, 0, 0, 180],
                        }
                    },
                    data: data1
                },
                {
                    name: '',
                    tooltip: {
                        show: false
                    },
                    type: 'bar',
                    barWidth: barWidth,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#3a7af5' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#6a4de7' // 100% 处的颜色
                            }], false),
                            barBorderRadius: [0, 0, 180, 0],
                        }
                    },
                    data: data1,
                    barGap: 0
                },
                {
                    name: '',
                    tooltip: {
                        show: false
                    },
                    type: 'pictorialBar',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#6a4de7' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#3a7af5' // 100% 处的颜色
                            }], false),
                            shadowColor: 'rgb(0,0,0,0.1)',
                        }
                    },
                    symbol: 'rect',
                    symbolRotate: config().lineWidth*18,
                    symbolSize: barWidth*1.6,
                    symbolOffset: [-barWidth, -barWidth*0.8],
                    symbolPosition: 'end',
                    data: data1,
                    z: 3
                },
                {
                    name: '预约参展',
                    type: 'bar',
                    barWidth: barWidth,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#fd7e31' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#ede370' // 100% 处的颜色
                            }], false),
                            barBorderRadius: [0, 0, 0, 180],
                        }
                    },
                    data: data2
                },
                {
                    name: 'rightB',
                    tooltip: {
                        show: false
                    },
                    type: 'bar',
                    barWidth: barWidth,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#ede370' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#fd7e31' // 100% 处的颜色
                            }], false),
                          },
                          barBorderRadius: [0, 0, 180, 0],
                    },
                    data: data2,
                    barGap: 0
                },
                {
                    name: 'topB',
                    tooltip: {
                        show: false
                    },
                    type: 'pictorialBar',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#fd7e31' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#ede370' // 100% 处的颜色
                            }], false),
                            shadowColor: 'rgb(0,0,0,0.1)',
                        }
                    },
                    symbol: 'rect',
                    symbolRotate: config().lineWidth*18,
                    symbolSize: barWidth*1.6,
                    symbolOffset: [barWidth, -barWidth*0.8],
                    symbolPosition: 'end',
                    data: data2,
                    z: 3
                }
            ]
        };
        chart2.setOption(option);
        window.onresize = chart2.resize;
    },
    chart2_1(){//核心区域停车场蓝
      var chart1 = echarts.init(document.getElementById('chart2_1'));
      var value = 0.70;
      var data = []
      data.push(value)
      data.push(value)
      data.push(value)
      var option = {
        title: {
            text: '核心区域停车场',
            textStyle: {
              color: '#fff',
              fontSize: config().fontSize*1.1,
            },
            left: 'center', // 定位
            bottom: '30%'
          },
          series: [{
              type: 'liquidFill',
              radius: '60%',
              center:['52.5%','50%'],
              data:[ 0.6, {
                    value: 0.5,
                    direction: 'left', //水波移动的方向，默认right,top 和bottom时，单条水波静止
                    itemStyle: {
                        normal: { //正常样式
                            color: '#3deffd',
                            opacity: 0.6,
                        }
                    },
                },
                {
                    value: 0.4,
                    itemStyle: {
                        normal: { //正常样式
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#0399fd' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#52fcfc' // 100% 处的颜色
                            }], false),
                        }
                    },
                },
                ],
              outline: {
                show: false , //是否显示轮廓 布尔值
              },
              backgroundStyle: {
                  borderWidth: -1,
                  color: 'rgb(0,40,61,0.2)'
              },
              label: {
                  normal: {
                      formatter: (value * 100).toFixed(2) + '%',
                      textStyle: {
                          fontSize: config().fontSize*1.3,
                      }
                  }
              },
              itemStyle: {
                normal: { //正常样式
                    color: '#208efe',
                    opacity: 0.6
                }
                },
          }]
      }
      chart1.setOption(option)
      window.onresize = chart1.resize;
    },
    chart2_2(){//核心区域停车场黄
      var chart1 = echarts.init(document.getElementById('chart2_2'));
      var value = 0.70;
      var data = []
      data.push(value)
      data.push(value)
      data.push(value)
      var option = {
        title: {
            text: '核心区域停车场',
            textStyle: {
              color: '#fff',
              fontSize: config().fontSize*1.1,
            },
            left: 'center', // 定位
            bottom: '30%'
          },
          series: [{
              type: 'liquidFill',
              radius: '60%',
              center:['52.5%','50%'],
              data:[ 0.6, {
                    value: 0.5,
                    direction: 'left', //水波移动的方向，默认right,top 和bottom时，单条水波静止
                    itemStyle: {
                        normal: { //正常样式
                            color: '#babe5c',
                            opacity: 0.6,
                        }
                    },
                },
                {
                    value: 0.4,
                    itemStyle: {
                        normal: { //正常样式
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#fbce00' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#aaba71' // 100% 处的颜色
                            }], false),
                        }
                    },
                },
                ],
              outline: {
                show: false , //是否显示轮廓 布尔值
              },
              backgroundStyle: {
                  borderWidth: -1,
                  color: 'rgb(0,40,61,0.2)'
              },
              label: {
                  normal: {
                      formatter: (value * 100).toFixed(2) + '%',
                      textStyle: {
                          fontSize: config().fontSize*1.3,
                      }
                  }
              },
              itemStyle: {
                normal: { //正常样式
                    color: '#fbce00',
                    opacity: 0.6
                }
                },
          }]
      }
      chart1.setOption(option)
      window.onresize = chart1.resize;
    },
    chart2_3(){//核心区域停车场红
      var chart1 = echarts.init(document.getElementById('chart2_3'));
      var value = 0.85;
      var data = []
      data.push(value)
      data.push(value)
      data.push(value)
      var option = {
          title: {
            text: '核心区域停车场',
            textStyle: {
              color: '#fff',
              fontSize: config().fontSize*1.1,
            },
            left: 'center', // 定位
            bottom: '30%'
          },
          series: [{
              type: 'liquidFill',
              radius: '60%',
              center:['52.5%','50%'],
              data:[ 0.6, {
                    value: 0.5,
                    direction: 'left', //水波移动的方向，默认right,top 和bottom时，单条水波静止
                    itemStyle: {
                        normal: { //正常样式
                            color: '#ba549b',
                            opacity: 0.6,
                        }
                    },
                },
                {
                    value: 0.4,
                    itemStyle: {
                        normal: { //正常样式
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#ff2661' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#d44285' // 100% 处的颜色
                            }], false),
                        }
                    },
                },
                ],
              outline: {
                show: false , //是否显示轮廓 布尔值
              },
              backgroundStyle: {
                  borderWidth: -1,
                  color: 'rgb(0,40,61,0.2)'
              },
              label: {
                  normal: {
                      formatter: (value * 100).toFixed(2) + '%',
                      textStyle: {
                          fontSize: config().fontSize*1.3,
                      }
                  }
              },
              itemStyle: {
                normal: { //正常样式
                    color: '#ff2661',
                    opacity: 0.6
                }
                },
          }]
      }
      chart1.setOption(option)
      window.onresize = chart1.resize;
    },
    chart2_4(){//预约临时停车场蓝
      var chart1 = echarts.init(document.getElementById('chart2_4'));
      var value = 0.70;
      var data = []
      data.push(value)
      data.push(value)
      data.push(value)
      var option = {
        title: {
            text: '预约临时停车场',
            textStyle: {
              color: '#fff',
              fontSize: config().fontSize*1.1,
            },
            left: 'center', // 定位
            bottom: '30%'
          },
          series: [{
              type: 'liquidFill',
              radius: '60%',
              center:['52.5%','50%'],
              data:[ 0.6, {
                    value: 0.5,
                    direction: 'left', //水波移动的方向，默认right,top 和bottom时，单条水波静止
                    itemStyle: {
                        normal: { //正常样式
                            color: '#3deffd',
                            opacity: 0.6,
                        }
                    },
                },
                {
                    value: 0.4,
                    itemStyle: {
                        normal: { //正常样式
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#0399fd' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#52fcfc' // 100% 处的颜色
                            }], false),
                        }
                    },
                },
                ],
              outline: {
                show: false , //是否显示轮廓 布尔值
              },
              backgroundStyle: {
                  borderWidth: -1,
                  color: 'rgb(0,40,61,0.2)'
              },
              label: {
                  normal: {
                      formatter: (value * 100).toFixed(2) + '%',
                      textStyle: {
                          fontSize: config().fontSize*1.3,
                      }
                  }
              },
              itemStyle: {
                normal: { //正常样式
                    color: '#208efe',
                    opacity: 0.6
                }
                },
          }]
      }
      chart1.setOption(option)
      window.onresize = chart1.resize;
    },
    chart2_5(){//预约临时停车场黄
      var chart1 = echarts.init(document.getElementById('chart2_5'));
      var value = 0.70;
      var data = []
      data.push(value)
      data.push(value)
      data.push(value)
      var option = {
        title: {
            text: '预约临时停车场',
            textStyle: {
              color: '#fff',
              fontSize: config().fontSize*1.1,
            },
            left: 'center', // 定位
            bottom: '30%'
          },
          series: [{
              type: 'liquidFill',
              radius: '60%',
              center:['52.5%','50%'],
              data:[ 0.6, {
                    value: 0.5,
                    direction: 'left', //水波移动的方向，默认right,top 和bottom时，单条水波静止
                    itemStyle: {
                        normal: { //正常样式
                            color: '#babe5c',
                            opacity: 0.6,
                        }
                    },
                },
                {
                    value: 0.4,
                    itemStyle: {
                        normal: { //正常样式
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#fbce00' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#aaba71' // 100% 处的颜色
                            }], false),
                        }
                    },
                },
                ],
              outline: {
                show: false , //是否显示轮廓 布尔值
              },
              backgroundStyle: {
                  borderWidth: -1,
                  color: 'rgb(0,40,61,0.2)'
              },
              label: {
                  normal: {
                      formatter: (value * 100).toFixed(2) + '%',
                      textStyle: {
                          fontSize: config().fontSize*1.3,
                      }
                  }
              },
              itemStyle: {
                normal: { //正常样式
                    color: '#fbce00',
                    opacity: 0.6
                }
                },
          }]
      }
      chart1.setOption(option)
      window.onresize = chart1.resize;
    },
    chart2_6(){//预约临时停车场红
      var chart1 = echarts.init(document.getElementById('chart2_6'));
      var value = 0.85;
      var data = []
      data.push(value)
      data.push(value)
      data.push(value)
      var option = {
          title: {
            text: '预约临时停车场',
            textStyle: {
              color: '#fff',
              fontSize: config().fontSize*1.1,
            },
            left: 'center', // 定位
            bottom: '30%'
          },
          series: [{
              type: 'liquidFill',
              radius: '60%',
              center:['52.5%','50%'],
              data:[ 0.6, {
                    value: 0.5,
                    direction: 'left', //水波移动的方向，默认right,top 和bottom时，单条水波静止
                    itemStyle: {
                        normal: { //正常样式
                            color: '#ba549b',
                            opacity: 0.6,
                        }
                    },
                },
                {
                    value: 0.4,
                    itemStyle: {
                        normal: { //正常样式
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#ff2661' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#d44285' // 100% 处的颜色
                            }], false),
                        }
                    },
                },
                ],
              outline: {
                show: false , //是否显示轮廓 布尔值
              },
              backgroundStyle: {
                  borderWidth: -1,
                  color: 'rgb(0,40,61,0.2)'
              },
              label: {
                  normal: {
                      formatter: (value * 100).toFixed(2) + '%',
                      textStyle: {
                          fontSize: config().fontSize*1.3,
                      }
                  }
              },
              itemStyle: {
                normal: { //正常样式
                    color: '#ff2661',
                    opacity: 0.6
                }
                },
          }]
      }
      chart1.setOption(option)
      window.onresize = chart1.resize;
    },
  },
   
}
</script>
<style lang="scss" scoped>
 #earlyWarning{
   width: 100%;
   height: 100vh;
   background:#081220;
  *{margin: 0;padding: 0;}
   #left,#right{
        position: absolute;
        z-index: 1;
        top:7vh;
        background: rgba(12,27,63,0.73);
   }
   .chart{
     height: 85.5%;
   }
    .chart_right{
      height: 28vh;
    }
    /*标题样式*/
    .title{
      color: #b7c0db;
      font-size: 3vw;
      line-height: 3vh;
      margin-left: 2vw;
    }
    /*标题前小竖扛样式*/
    .block{
      width: 0.5vh;
      height: 2.5vh;
      background: -moz-linear-gradient(top,#3ce5f2,#3b57fb)!important;
      background: -webkit-linear-gradient(top,#3ce5f2,#3b57fb)!important;
      background: -o-linear-gradient(top,#3ce5f2,#3b57fb)!important;
      background: linear-gradient(top,#3ce5f2,#3b57fb)!important;
      margin-top: 21%!important;
      margin-left: 40%!important;
      border-radius: 1.5vw;
    }
    .titleBox{//头部标题
        width: 100%;
        height: 8vh;
        line-height: 8vh;
        background: #091432;
        h4{
            font-size:6vw;
            color: #76CEFB;
            text-align: center;
            background-image: -webkit-linear-gradient(left, #74cdfb , #bcface ,);
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
        }
    }
    .chart2Num{
        font-size: 2.3vw;
        color: #AFB8D2;
        padding: 0 1vw;
        margin-top: 2.5vh;
        display: flex;
        align-items: center;
        justify-content: space-between;
        p{
           border-right: 0.1vw dashed #AFB8D2;
           padding-right: 1vw;
        }
        span:nth-child(2){
          color: #fff;
          background-image: url('../../static/img/numBg.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          padding: 0.1vw 1vw;
        }
    }
    
    .chart2Text{
      font-size: 2.3vw;
      color: #AFB8D2;
      display: flex;
      margin-top: 1vh;
      align-items: center;
      justify-content: space-between;
      p{
        display: flex;
        align-items: center;
      }
      p:nth-child(1){
          span:nth-child(1){
            display: inline-block;
            width: 2vw;
            height: 2vw;
            margin-right: 1vw;
            background:#4f66ff;
          }
        }
        p:nth-child(2){
             span:nth-child(1){
                display: inline-block;
                width: 2vw;
                height: 2vw;
                margin-right: 1vw;
                background:#ffaf24;
            }
        }
    }
    .chart5Text{
        width: 90%;
        font-size: 2.3vw;
        color: #AFB8D2;
        margin-left: 1vw;
        p{
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-top: 2.5vh;
        }
        p:nth-child(1){
            padding-bottom: 1vh;
            span:nth-child(2){
              font-size: 2.5vw;
              color: #3efdfd;
              background-image: url('../../static/img/number.png');
              background-repeat: no-repeat;
              background-size: 100% 100%;
              padding: 0.5vw 4vw;
            }
        }
        p:nth-child(2){
             span:nth-child(1){
                width: 2vw;
                height: 2vw;
                background:#208efe;
            }
            span:nth-child(3){
                color: #208efe;
            }
        }
        p:nth-child(3){
             margin-left: 1vw;
             span:nth-child(1){
                width: 2vw;
                height: 2vw;
                display: inline-block;
                margin-right: 1vw;
                background:#fbce00;
            }
            span:nth-child(3){
                color: #fbce00;
            }
        }
        p:nth-child(4){
             span:nth-child(1){
                width: 2vw;
                height: 2vw;
                background:#ff2661;
            }
            span:nth-child(3){
                color: #ff2661;
            }
        }
    }
    .deviationRate{//偏差率
      width: 80%;
      font-size: 2.3vw;
      color: #AFB8D2;
      margin-left:1vw;
      background-image: url('../../static/img/titleborder_l.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 0.4vw 0 0.5vw 0;
    }
    .peplTaotal{//普通观众
      margin-top: 5vw;
      margin-bottom: 4vw;
      font-size: 2.3vw;
      color: #AFB8D2;
      width: 50%;
      background-image: url('../../static/img/titleborder_l.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 0.4vw 0 0.5vw 0;
    }
    .loadBearing{//最大承载
      margin-top: 5vw;
      font-size: 2.3vw;
      color: #AFB8D2;
      span{
        background-image: url('../../static/img/numBg.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding: 0.1vw 0.3vw;
      }
    }
    .curDate{
      margin-top:3.5vh;
      margin-left:3vh;
      font-size: 2.3vw;
      color: #AFB8D2;
      p{
        margin-top: 3vw;
        span{
          background-image: url('../../static/img/numBg.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          padding: 0.5vw 1.5vw;
        }
      }
      
    }
    .chart1Text{
        font-size: 2.3vw;
        color: #AFB8D2;
        display: flex;
        justify-content: space-between;
        margin-top: 4vw;
        padding: 0 5vw;
        p{
            display: flex;
            align-items: center;
            justify-content: space-around;
             span:nth-child(1){
               display: inline-block;
               margin-right: 1vw;
             }
        }
        p:nth-child(1){
          span:nth-child(1){
              width: 2vw;
              height: 2vw;
              background:#3efdfd;
          }
          span:nth-child(3){
              color: #3efdfd;
          }
        }
        p:nth-child(2){
          span:nth-child(1){
              width: 2vw;
              height: 2vw;
              background:#fbce00;
          }
          span:nth-child(3){
              color: #fbce00;
          }
        }
        p:nth-child(3){
          span:nth-child(1){
              width: 2vw;
              height: 2vw;
              background:#ff2661;
          }
          span:nth-child(3){
              color: #ff2661;
          }
        }
    }
    .rateContentBox{
      margin-top: 3vw;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 1vw;
      .rateContent{
        display: flex;
        align-items: center;
        font-size:2.3vw;
        color: #3f94ee;
        display: flex;
        align-items: center;
        border: 1px solid #1042ae;
        padding: 2.5vw 3vw;
        img{
          width: 2vw;
          height:2vw;
        }
        span:nth-child(2){
           display: inline-block;
           margin: 0 0.5vw;
        }
        .colorGreen{
          color: #1cff9e;
        }
        .colorYellow{
          color: #e1ba0f;
        }
        .colorRed{
          color: #e6265f;
        }
      }
    }
    #chart2_1,#chart2_4{
      background-image: url('../../static/img/blueBg.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    #chart2_2,#chart2_5{
      background-image: url('../../static/img/yellowBg.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    #chart2_3,#chart2_6{
      background-image: url('../../static/img/redBg.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    #chart2_4,#chart2_5,#chart2_6{
      margin-left: 1vw;
    }
 }
</style>
